<template>
    <view :class="[JkClass, 'jk-drawer', {'jk-drawer-show': visible}, 'jk-drawer-'+mode]">
        <view v-if="mask" class="jk-drawer-mask" @tap="handleMaskClick"></view>
        <view class="jk-drawer-container">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Drawer',
        props: {
            visible: {
                type: Boolean,
                default: false
            },

            mask: {
                type: Boolean,
                default: true
            },

            maskClosable: {
                type: Boolean,
                default: true
            },

            mode: {
                type: String,
                default: 'left' // left right
            },
            JkClass: {
                type: String,
                default: ''
            }
        },
        methods: {
            handleMaskClick() {
                if (!this.maskClosable) {
                    return;
                }
                this.$emit('close', {});
            }
        }
    }
</script>

<style lang="scss">
    .jk-drawer {
        visibility: hidden
    }

    .jk-drawer-show {
        visibility: visible
    }

    .jk-drawer-show .jk-drawer-mask {
        display: block;
        opacity: 1;
    }

    .jk-drawer-show .jk-drawer-container {
        opacity: 1;
    }

    .jk-drawer-show.jk-drawer-left .jk-drawer-container,
    .jk-drawer-show.jk-drawer-right .jk-drawer-container {
        transform: translate3d(0, -50%, 0)
    }

    .jk-drawer-mask {
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        background: rgba(0, 0, 0, .6);
        transition: all .3s ease-in-out
    }

    .jk-drawer-container {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        transform-origin: center;
        transition: all .3s ease-in-out;
        z-index: 7;
        opacity: 0;
        height: 100%;
    }

    .jk-drawer-left .jk-drawer-container {
        left: 0;
        top: 50%;
        transform: translate3d(-100%, -50%, 0);
    }

    .jk-drawer-right .jk-drawer-container {
        right: 0;
        top: 50%;
        left: auto;
        transform: translate3d(100%, -50%, 0);
    }
</style>
